<template>
  <view class="recharge-record-page">
    <!-- 页面标题 -->
    <view class="page-title">充值记录</view>
    
    <!-- 记录列表容器 -->
    <view class="record-list">
      <!-- 循环渲染每条充值记录 -->
      <view class="record-card" v-for="(record, index) in rechargeRecords" :key="index" @click="goToDetail(record, index)">
        <!-- 时间信息 -->
        <text class="record-time">{{ record.time }}</text>
        
        <!-- 会员信息区域 -->
        <view class="member-info">
          <view class="info-row">
            <text class="info-label">会员姓名：</text>
            <text class="info-value">{{ record.memberName }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">手机号：</text>
            <text class="info-value">{{ record.phone }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">会员卡号：</text>
            <text class="info-value">{{ record.memberId }}</text>
          </view>
        </view>
        
        <!-- 充值详情区域 -->
        <view class="recharge-detail">
          <view class="info-row">
            <text class="info-label">充值类型：</text>
            <text class="info-value type-tag">{{ record.type }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">{{ record.amountLabel }}：</text>
            <text class="info-value amount">{{ record.amount }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">套餐名称：</text>
            <text class="info-value">{{ record.packageName }}</text>
          </view>
        </view>
        
        <!-- 退款按钮 -->
        <button class="refund-btn" @click="(e) => handleRefund(index, e)">退款</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 充值记录数据
      rechargeRecords: [
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          phone: '152xxxxxxxx',
          memberId: '12345678',
          type: '预付款',
          amountLabel: '实际到账',
          amount: '100',
          packageName: '100元预付款 ×1'
        },
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          phone: '152xxxxxxxx',
          memberId: '12345678',
          type: '游戏币',
          amountLabel: '实际到账',
          amount: '200',
          packageName: '100游戏币 ×2'
        },
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          phone: '152xxxxxxxx',
          memberId: '12345678',
          type: '游乐币',
          amountLabel: '充值数量',
          amount: '100',
          packageName: '100游乐币'
        },
        {
          time: '2025-10-24 15:00:00',
          memberName: '张三',
          phone: '152xxxxxxxx',
          memberId: '12345678',
          type: '游戏币',
          amountLabel: '实际到账',
          amount: '300',
          packageName: '200游戏币 ×1 + 赠100'
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.rechargeList')
  	});
  },
  methods: {
    // 跳转到详情页
        goToDetail(record, index) {
          // 传递记录数据到详情页
          uni.navigateTo({
            url: `/pages/order/recharge-record-detail?recordIndex=${index}&recordData=${encodeURIComponent(JSON.stringify(record))}`
          });
        },
        
        // 处理退款操作
        handleRefund(index, event) {
          // 阻止事件冒泡，避免触发卡片点击
          event && event.stopPropagation && event.stopPropagation();
      const record = this.rechargeRecords[index];
      uni.showModal({
        title: '确认退款',
        content: `是否为【${record.memberName}】的${record.type}充值记录办理退款？`,
        confirmText: '确认退款',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            // 实际项目中调用退款接口
            uni.showToast({
              title: '退款申请已提交',
              icon: 'success'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 页面容器 - 100%高度 */
.recharge-record-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 16px;
  box-sizing: border-box;
}

/* 页面标题 */
.page-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

/* 记录列表容器 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 记录卡片样式 - 美化核心 */
.record-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

/* 时间信息样式 */
.record-time {
  display: block;
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
  padding-left: 4px;
}

/* 信息行通用样式 */
.info-row {
  display: flex;
  margin-bottom: 12px;
  line-height: 1.5;
}

.info-row:last-child {
  margin-bottom: 0;
}

/* 标签文本样式 */
.info-label {
  font-size: 14px;
  color: #666;
  width: 90px;
  flex-shrink: 0;
}

/* 内容文本样式 */
.info-value {
  font-size: 14px;
  color: #333;
  flex: 1;
  word-break: break-all;
}

/* 充值类型标签美化 */
.type-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* 不同充值类型的颜色区分 */
.type-tag[data-v-7a4a2e1a]:nth-child(2):before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}

/* 预付款类型 */
.type-tag[data-v-7a4a2e1a]:nth-child(2):nth-of-type(1):before {
  background-color: #1890ff;
}

/* 游戏币类型 */
.type-tag[data-v-7a4a2e1a]:nth-child(2):nth-of-type(2):before {
  background-color: #52c41a;
}

/* 游乐币类型 */
.type-tag[data-v-7a4a2e1a]:nth-child(2):nth-of-type(3):before {
  background-color: #faad14;
}

/* 金额数字美化 */
.amount {
  color: #ff4d4f;
  font-weight: 500;
}

/* 会员信息与充值详情分隔线 */
.member-info {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #f0f0f0;
}

/* 退款按钮美化 */
.refund-btn {
  position: absolute;
  top: 24px;
  right: 18px;
  width: 60px;
  height: 32px;
  line-height: 32px;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  transition: all 0.2s;
}

.refund-btn:active {
  background-color: #f5222d;
  transform: scale(0.96);
}

/* 适配小屏设备 */
@media (max-width: 320px) {
  .refund-btn {
    position: static;
    width: 100%;
    margin-top: 16px;
  }
  
  .member-info {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
}
</style>